<script setup>

/**
 * @import pinia stores
 */

//pinia -> usePetDoctorStaticMessStore
import { usePetDoctorStaticMessStore } from '@/stores/petDoctor/petDoctorStaticMess'

/**
 * @param roleOpponent 对方角色标记
 */
let { roleOpponent } = usePetDoctorStaticMessStore()

// pinia -> usePetDoctorPageStore
import { usePetDoctorPageStore } from '@/stores/petDoctor/petDoctorPage.js'

/**
 * @function chatClickAIHead 点击健康顾问头像
 */
const {chatClickAIHead} = usePetDoctorPageStore()
/**
 * props
 */
const props = defineProps({
    item: {
        type: Object,
        default: {}
    },
    avatar: {
        type: String,
        default: ''
    }
})

/**
 * 点击健康顾问头像事件
 */
const chatClickAIHeadEvent = () => {
    if(props.item.role == roleOpponent){
        chatClickAIHead()
    }
}

</script>

<template>
    <div class="chatListItem-class">
        <div>
            <div :class="['mycontent', { 'opponentContent': item.role == roleOpponent }]">
                {{ item.content }}
            </div>
        </div>
        <div>
            <image :class="['myAvatar', { 'opponentAvatar': item.role == roleOpponent }]" @click.stop="chatClickAIHeadEvent" :src="avatar"
                mode="aspectFill" />
        </div>
    </div>
</template>

<style scoped>
.chatListItem-class {
    position: relative;
    margin-bottom: 4vh;
}

.chatListItem-class:nth-child(1) {
    margin-top: 3vh;
}

.myAvatar {
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    position: absolute;
    right: 50rpx;
    top: -60rpx;
}

.opponentAvatar {
    left: 50rpx;
}

.mycontent {
    width: 360rpx;
    position: relative;
    margin: 0 auto;
    color: #faf3ea;
    background-color: #e9b579;
    border-radius: 28rpx 0 28rpx 28rpx;
    padding: 1.5vh 20rpx;
    font-size: 28rpx;
}

.opponentContent {
    background-color: transparent;
    color: #edb678;
    border-radius: 0 28rpx 28rpx 28rpx;
    border: #c4720d 5rpx solid;
}
</style>